<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="auto" label-position="right"
            v-show="showSearch">
            <el-row>
                <el-form-item label="退库日期" style="width: 308px;">
                    <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
                        start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="退库单编码" prop="useCode">
                    <el-input v-model.trim="queryParams.useCode" style="width: 180px;" placeholder="请输入退库单编码"
                        @keyup.enter="handleQuery" />
                </el-form-item>
               
                <el-form-item label="领用部门" prop="deptId">
                    <el-tree-select style="width: 200px" v-model="queryParams.deptId" :data="deptOptions"
                        :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择领用部门"
                        check-strictly />
                </el-form-item>
                <div class="operation">
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    <el-button @click="advanced = !advanced">
                        <a style=" color: #448EF7;">
                            <el-icon v-if="advanced">
                                <ArrowUpBold />
                            </el-icon>
                            <el-icon v-else>
                                <ArrowDownBold />
                            </el-icon>
                        </a>
                    </el-button>
                    <right-toolbar style="margin-left: 10px;" :search="false" v-model:showSearch="showSearch"
                        @queryTable="getList" :columns="columns"></right-toolbar>
                </div>
            </el-row>
            <el-row v-if="advanced">
                <el-form-item label="物料名称" prop="materialName">
                    <el-input v-model.trim="queryParams.materialName" style="width: 180px;" placeholder="请输入物料名称"
                        @keyup.enter="handleQuery" />
                </el-form-item>
                <el-form-item label="机台" prop="machineName">
                    <el-input v-model.trim="queryParams.machineName" style="width: 180px;" placeholder="请输入机台"
                        @keyup.enter="handleQuery" />
                </el-form-item>
            </el-row>
        </el-form>
        <div>
            <el-table v-loading="loading" border :data="dataList">
                <el-table-column label="序号" width="60" type="index" align="center" />
                <el-table-column v-if="columns[0].visible" label="退库单编码" min-width="200" align="center" prop="returnCode"
                    :show-overflow-tooltip="true">
                    <template v-slot="{ row }">
                        <el-button type="primary" @click="handleReturnCode(row)" text>{{ row.returnCode }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column v-if="columns[1].visible" label="退库日期" min-width="150" align="center" prop="returnDate"
                    :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column v-if="columns[2].visible" label="物料分类" min-width="150" align="center" prop="className"
                    :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column v-if="columns[3].visible" label="物料编码" min-width="220" align="center" prop="materialCode"
                    :show-overflow-tooltip="true">
                    <template v-slot="{ row }">
                        <el-button type="primary" @click="handleMaterialCode(row)" text>{{ row.materialCode }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column v-if="columns[4].visible" label="物料名称" min-width="150" align="center" prop="materialName"
                    :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column v-if="columns[5].visible" label="规格型号" min-width="150" align="center" prop="specs"
                    :show-overflow-tooltip="true">
<!--                    <template #default="scope">-->
<!--                        <dict-tag :options="mes_paper_specs" :value="scope.row.specs" />-->
<!--                    </template>-->
                </el-table-column>
                <el-table-column v-if="columns[6].visible" label="单位" min-width="150" align="center" prop="unit"
                    :show-overflow-tooltip="true">
                    <template #default="scope">
                        <dict-tag :options="mes_material_unit" :value="scope.row.unit" />
                    </template>
                </el-table-column>
                <el-table-column v-if="columns[7].visible" label="退库数量" min-width="120" align="center" prop="quantity"
                    :show-overflow-tooltip="true" />
                <el-table-column v-if="columns[8].visible" label="单价" min-width="120" align="center" prop="price"
                    :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column v-if="columns[9].visible" label="金额" min-width="120" align="center" prop="amount"
                    :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column v-if="columns[10].visible" label="部门" min-width="120" align="center" prop="deptName">
                </el-table-column>
                <el-table-column v-if="columns[11].visible" min-width="120" label="机台" align="center" prop="machineName">
                </el-table-column>
                <el-table-column v-if="columns[12].visible" width="120" label="制单人" align="center" prop="createBy"
                    :show-overflow-tooltip="true" />
                <el-table-column v-if="columns[13].visible" width="100" label="备注" align="center" prop="remark"
                    :show-overflow-tooltip="true" />

            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getList" />
        </div>
    </div>
</template>

<script setup name="searchReturnSlip">
import { detailMaterialreturn } from '@/api/storage/returnSlip.js'
import { deptTreeSelect } from "@/api/system/user";
const { proxy } = getCurrentInstance();

const {  mes_material_unit
} = proxy.useDict('mes_material_unit');
const loading = ref(true);
const dataList = ref([])
const showSearch = ref(true);
const router = useRouter()
const total = ref(0);
const advanced = ref(false)
const deptOptions = ref([])


// 列显隐信息
const columns = ref([
    { key: 0, label: `退库单编码`, visible: true },
    { key: 1, label: `退库日期`, visible: true },
    { key: 2, label: `物料分类`, visible: true },
    { key: 3, label: `物料编码`, visible: true },
    { key: 4, label: `物料名称`, visible: true },
    { key: 5, label: `规格型号`, visible: true },

    { key: 6, label: `单位`, visible: true },
    { key: 7, label: `退库数量`, visible: true },
    { key: 8, label: `单价`, visible: true },
    { key: 9, label: `金额`, visible: true },
    { key: 10, label: `部门`, visible: true },
    { key: 11, label: `机台`, visible: true },
    { key: 12, label: `制单人`, visible: true },
    { key: 13, label: `备注`, visible: true },

]);

const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: 1   //提交状态
    },
});

const getDateNow = () => {
    var myDate = new Date();
    var year = myDate.getFullYear();
    var month = myDate.getMonth() + 1  //获取当前月份(0-11,0代表1月，所以要加1);
    var day = myDate.getDate();//获取当前日（1-31）
    if (month < 10) {
        month = "0" + month;
    }
    if (day >= 0 && day <= 9) {
        day = "0" + day;
    }
    var firstDay = year + "-" + month + "-01";
    return firstDay;
}
const getCurrentDay = () => {
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth() + 1; // 月份从0开始，需要加1
    var day = now.getDate();
    if (month < 10) {
        month = "0" + month;
    }
    if (day >= 0 && day <= 9) {
        day = "0" + day;
    }
    const currentDay = year + "-" + month + "-" + day;
    return currentDay
}
const dateRange = ref([getDateNow(), getCurrentDay()]);
const { queryParams } = toRefs(data);

function getDeptTree() {
    deptTreeSelect().then(response => {
        deptOptions.value = response.data;
    });
};
const getList = () => {
    loading.value = true
    detailMaterialreturn({ ...queryParams.value, beginTime: Array.isArray(dateRange.value) ? dateRange.value[0] : undefined,
        endTime: Array.isArray(dateRange.value) > 0 ? dateRange.value[1] : undefined, }).then(res => {
        loading.value = false
        dataList.value = res.rows
        total.value = res.total
    }).catch(err => {
        loading.value = false
    })
}

// 搜索
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
}
/** 重置按钮操作 */
const resetQuery = () => {
    dateRange.value = [getDateNow(), getCurrentDay()];
    proxy.resetForm("queryRef");
    handleQuery();
};

const handleReturnCode = (row) => {
    // router.push({
    //     path: '/storage/returnSlip',
    //     query: {
    //         code: row.returnCode
    //     }
    // })
    router.push({
        path: '/storage/returnSlip/details',
        query: {
            id: row.returnId,
            readonly: true,
            code: row.returnCode,
            moduleCode:'searchReturnSlip'
        }
    })
}
const handleMaterialCode = (row) => {
    // router.push({
    //     path: '/basicInfo/accessory',
    //     query: {
    //         materialCode: row.materialCode,
    //     }
    // })
    router.push({
        path: '/basicInfo/accessory/details',
        query: {
            id: row.materialId,
            readonly: true,
            code: row.materialCode,
            moduleCode:'searchReturnSlip'
        }
    })
}

getDeptTree()
getList()


</script>

<style lang="scss" scoped>
.operation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 18px;
}
</style>